<template>

	<view class="job_list">
	<uni-notice-bar class="c_notice_bar" :speed="speedBar" showIcon scrollable single
		text="请及时下载保存自己的作品，所有作品数据将在每日凌晨都会被彻底删除，无法找回，无需手动删除。。。。。视频换脸过程中，本页面不会自动刷新，请手动刷新查看最新换脸状态"></uni-notice-bar>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="job_item" v-for="(item,index) in video_list" :key="index" @click="onItemClick(item)">
				<view class="title">
					<image :src="item.file1" mode="aspectFill" class="t_image"></image>
					<view class="t_right">
						<view class="tt_1">
							<text class="ttt_1">状态</text>
							<text class="ttt_2"
								:style="{ color: item.result === '成功' ? '#26C247' : item.result === '失败' ? '#FF0000' : '#222222' }">{{item.result}}</text>
							<uni-icons type="right" class="ttt_3"></uni-icons>
						</view>
						<view class="line"></view>
						<view class="tt_2">
							<text class="tt_2_t" style="margin-right: 20rpx;">类型：</text>
							<text class="tt_2_t">{{item.type}}</text>
						</view>
						<view class="tt_3" style="margin-top: 8rpx;">
							<text class="tt_2_t" style="margin-right: 20rpx;">预计消耗积分：</text>
							<text class="tt_2_t">{{item.score}}</text>
						</view>
						<view class="tt_4" style="margin-top: 8rpx;">
							<text class="tt_2_t" style="margin-right: 20rpx;">任务时间：</text>
							<text class="tt_2_t">{{item.create_time}}</text>
						</view>
					</view>
				</view>
				<view class="bottom" v-if="item.result== '失败'">
					<text class="t1">{{item.result_msg}}</text>
				</view>
			</view>
		</mescroll-body>
		
		<view class="RefreshIcon" @click="RefreshBtn" >刷新</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		get_job_list
	} from '@/src/api/huanlian.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				currePageNum:null,
				video_list: null,
				downOption: {},
				speedBar:70,
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			};
		},
		 onLoad() {
			
		},
		onHide() {
			// 	页面隐藏时触，清除定时器
			//this.stopRefreshInterval();
		},
		methods: {
				startRefreshInterval() {
					if(this.refreshInterval){clearInterval(this.refreshInterval);}					
					this.refreshInterval = setInterval(() => {
							this.getJobList()					
					}, 20000);
				},
				stopRefreshInterval() {
					// 清除定时器
					clearInterval(this.refreshInterval);
				},
			getTextStyle(item) {
				let color = '#222222'
				if (item.result == '成功') {
					color = '#26C247'
				} else if (item.result == '失败') {
					color = '#FF0000'
				}
				return {
					color: color
				}
			},
			onItemClick(item) {
				if (item.result != "成功") return;
				if (item.result_video){
					uni.navigateTo({
						url: `/src/pages/Ability/VideoResult/VideoResult?video_url=${encodeURIComponent(item.result_video)}&tip=${item.tip}&result_msg=${encodeURIComponent(item.result_msg)}`
					})
					return
				}
				if (item.result_image){
					uni.navigateTo({
						url: `/src/pages/Ability/Result/Result?result_img=${encodeURIComponent(item.result_image)}&tip=${item.tip}&result_msg=${encodeURIComponent(item.result_msg)}`
					})
					return
				}
			},
			async upCallback(page) {
				try {
					this.currePageNum=page.num
					let res = await get_job_list({
						page_number: page.num,
					})
					let curPageData = res.data.list
					let curPageLen = curPageData.length;
					if (page.num == 1) this.video_list = []; //如果是第一页需手动置空列表
					this.video_list = this.video_list.concat(curPageData); //追加新数据
					// 页面加载时，启动定时器
					//this.startRefreshInterval();
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen, res.data.has_next);
					}, 1500)
				} catch (e) {
					this.mescroll.endErr()
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				}
			},
			async getJobList() {
				try {
					if(this.currePageNum){
						// 设置定时器，每隔5秒刷新一次数据
						let res = await get_job_list({
							page_number: this.currePageNum,
						})						
						// for(var k=0; k<this.video_list.length;k++){
						// 	for(var i=0;i<res.data.list.length;i++){								
						// 		if(this.video_list[k].order_id===res.data.list[i].order_id  ){	
						// 			this.video_list[k].result_msg=res.data.list[i].result_msg
						// 			this.video_list[k].type=res.data.list[i].type
						// 			this.video_list[k].create_time=res.data.list[i].create_time
						// 			this.video_list[k].score=res.data.list[i].score
						// 			this.video_list[k].result_video=res.data.list[i].result_video
						// 			this.video_list[k].result=res.data.list[i].result
						// 			this.video_list[k].file1=res.data.list[i].file1
						// 		}
						// 	}
						// }	
					}
				} catch (e) {
					if (!e) return
					uni.showModal({
						content: e.errMsg || e.message,
						showCancel: false
					});
				}
			},
			RefreshBtn(){
				this.getJobList()
			}
			
		}
	}
</script>

<style lang="scss">
	@import 'JobList.scss';
</style>